<template>
	<div>
		<Header :left="false"/>
		<Tabbar v-model="tabActive" id="tabbar" @change="changeTab" fixed>
			<TabbarItem icon="service" :info="realname_count">录姓名</TabbarItem>
			<TabbarItem icon="service" :info="script_count">录话术</TabbarItem>
			<TabbarItem icon="user-o">我的</TabbarItem>
		</Tabbar>
	</div>
</template>

<script>
	import { storage } from "@/libs/utils";
	import Header from "@/components/header.vue";
	import apicloud from "@/libs/apicloud";
	import { API } from "@/libs/api";

	/* You can use other UI framework as u like */
	import { Tabbar, TabbarItem } from "vant"; // Dynamic import is a good idea to keep ur page slim and fast

	window.homeVue = {
		// Pay attention here!!
		name: "home",
		components: { Header, Tabbar, TabbarItem },
		data() {
			return {
				tabActive: 0,
				realname_count: '',
				script_count: '',
				username: '',
			};
		},
		created() {},
		mounted() {
			this.init();
			if (this.is_login()) {
				this.openHomeFrame()
			} else {
				this.openLoginFrame()
			}
		},
		methods: {
			init() {
				const that = this;

				this.username = storage.get('username');

				this.$ac.setStatusBarStyle({
					style: 'dark'
				});

				this.$ac.addEventListener({
					name: 'loginSuccess'
				}, (ret, err) => {
					storage.set('username', ret.value.username);
					this.username = ret.value.username;
					that.$ac.closeFrame({
						name: 'loginFrame'
					});
					this.openHomeFrame();
				});

				this.$ac.addEventListener({
					name: 'logout'
				}, (ret, err) => {
					storage.del('username');
					that.$ac.closeFrameGroup({
						name: 'homeTabsFrame'
					});
					this.openLoginFrame();
				});

				this.$ac.addEventListener({
					name: 'updateRealnameCount'
				}, (ret, err) => {
					that.updateRealnameCount()
				});

				this.$ac.addEventListener({
					name: 'updateScriptCount'
				}, (ret, err) => {
					that.updateScriptCount()
				})
			},
			updateRealnameCount() {
				API.realname_count(this.username)
						.then((ret) => {
							if (ret.data > 0) {
								this.realname_count = ret.data
							} else {
								this.realname_count = ''
							}
						})
						.catch((err) => {
							Dialog({
								title: '获取剩余姓名数量失败',
								message: JSON.stringify(err)
							});
						});
			},
			updateScriptCount() {
				API.script_count(this.username)
						.then((ret) => {
							if (ret.data > 0) {
								this.script_count = ret.data
							} else {
								this.script_count = ''
							}
						})
						.catch((err) => {
							Dialog({
								title: '获取剩余话术数量失败',
								message: JSON.stringify(err)
							});
						});
			},
			is_login() {
				return !!storage.get('username');
			},
			openLoginFrame() {
				let navHeight = apicloud.dom("#nav").offsetHeight;
				let frameHeight =
						this.$ac.winHeight -
						apicloud.dom("#nav").offsetHeight;
				this.$ac.openFrame({
					name: "loginFrame",
					url: "login.html",
					bounces: false,
					rect: {
						x: 0,
						y: navHeight,
						w: "auto",
						h: frameHeight
					},
				});
			},
			openHomeFrame() {
				// No vue-router, use apicloud's framegroup to get the max transform efficiency
				// But if u wanna a smooth coding feeling, just use the vue router and the v-tap
				let navHeight = apicloud.dom("#nav").offsetHeight;
				let frameHeight =
						this.$ac.winHeight -
						apicloud.dom("#tabbar").offsetHeight -
						apicloud.dom("#nav").offsetHeight;
				const that = this;
				this.$ac.openFrameGroup(
						{
							name: "homeTabsFrame",
							scrollEnabled: false,
							rect: {
								x: 0,
								y: navHeight,
								w: "auto",
								h: frameHeight
							},
							index: 0,
							useWKWebView: true, // Be careful here
							historyGestureEnabled: true,
							frames: [
								{
									name: "tab1",
									url: "tab1.html",
									bounces: false
								},
								{
									name: "tab2",
									url: "tab2.html",
									bounces: false
								},
								{
									name: "tab3",
									url: "tab3.html",
									bounces: false
								}
							]
						},
						(ret, err) => { // You must use arrow function that can been used 'THIS'
							that.tabActive = ret.index;
						}
				);
			},
			changeTab(index) {
				// You cann't test this on the browser, use wifi sync to ur phone pleaz
				console.info(`select tab: ${index}`); // Must be use `` to log, DO NOT use console.info('', ''), it will ignore the second param
				this.$ac.setFrameGroupIndex({
					name: "homeTabsFrame",
					index,
					scroll: true
				});
			},
		}
	};

	export default window.homeVue;
</script>

<style scoped>
	#tabbar {
		position: fixed;
	}
</style>
